<template>
  <div class="homeddd">
    <div id="box5" @mousemove="handleMove" @mouseout="handleOut">
      <div id="box" class="b" @click="handleClick1" />
      <div id="box1" class="b" @click="handleClick2" />
      <div id="box2" class="b" @click="handleClick3" />
      <div id="box3" class="b" @click="handleClick4" />
    </div>
    <div v-if="isShow" class="dtbox">
      <div class="dsj">电梯大数据</div>
    </div>
    <div v-if="isShow1" class="dtbox">
      <div class="dsj">电梯物联网</div>
    </div>
    <div v-if="isShow2" class="dtbox">
      <div class="dsj">智慧小区</div>
    </div>
    <div v-if="isShow3" class="dtbox">
      <div class="dsj">电梯监控</div>
    </div>
    <transition name="fade">
      <div v-if="show4">hello world</div>
    </transition>
    <button @click="handleClick">切换</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      t: null,
      t1: null,
      t2: null,
      t3: null,
      isShow: false,
      isShow1: false,
      isShow2: false,
      isShow3: false,
      isShow4: false
    }
  },
  created() {
    this.getYuanzhous()
  },
  methods: {
    handleClick() {
      this.show4 = (this.show4 !== true)
    },
    getYuanzhous() {
      this.getYuanzhou()
      this.getYuanzhou1()
      this.getYuanzhou2()
      this.getYuanzhou3()
    },
    clearTimes() {
      clearInterval(this.t)
      clearInterval(this.t1)
      clearInterval(this.t2)
      clearInterval(this.t3)
    },
    // 鼠标进入
    handleMove() {
      this.clearTimes()
    },
    // 鼠标移开
    handleOut() {
      if (this.isShow === true || this.isShow1 === true || this.isShow2 === true || this.isShow3 === true) {
        this.clearTimes()
        return
      }
      this.getYuanzhous()
    },
    // 点击事件
    handleClick1() {
      this.isShow = true
      this.isShow1 = false
      this.isShow2 = false
      this.isShow3 = false
      this.clearTimes()
    },
    handleClick2() {
      this.isShow1 = true
      this.isShow = false
      this.isShow2 = false
      this.isShow3 = false
      this.clearTimes()
    },
    handleClick3() {
      this.isShow2 = true
      this.isShow = false
      this.isShow1 = false
      this.isShow3 = false
      this.clearTimes()
    },
    handleClick4() {
      this.isShow3 = true
      this.isShow = false
      this.isShow1 = false
      this.isShow2 = false
      this.clearTimes()
    },
    getYuanzhou() {
      //		步长度数
      var speed = 10
      //		半径
      var r = 200
      //		当前度数
      var iNow = 0

      //		清除计时器
      clearInterval(this.t)
      //		开启计时器
      this.t = setInterval(() => {
        //			判断是否到目标
        //				计算当前度数
        iNow += speed
        var box = document.getElementById('box')
        //				三角函数

        //				利用三角函数,根据当前度数计算left和top，生效
        box.style.left = Math.cos(Math.PI / 180 * iNow) * r + 150 + 'px'
        box.style.top = Math.sin(Math.PI / 180 * iNow) * r + 150 + 'px'
      }, 150)
    },
    getYuanzhou1() {
      //		步长度数
      var speed = 10
      //		半径
      var r = 200
      //		当前度数
      var iNow = 90

      //		清除计时器
      clearInterval(this.t1)
      //		开启计时器
      this.t1 = setInterval(() => {
        //			判断是否到目标
        //				计算当前度数
        iNow += speed
        var box = document.getElementById('box1')
        //				三角函数

        //				利用三角函数,根据当前度数计算left和top，生效
        box.style.left = Math.cos(Math.PI / 180 * iNow) * r + 150 + 'px'
        box.style.top = Math.sin(Math.PI / 180 * iNow) * r + 150 + 'px'
      }, 150)
    },
    getYuanzhou2() {
      //		步长度数
      var speed = 10
      //		半径
      var r = 200
      //		当前度数
      var iNow = 180

      //		清除计时器
      clearInterval(this.t2)
      //		开启计时器
      this.t2 = setInterval(() => {
        //			判断是否到目标
        //				计算当前度数
        iNow += speed
        var box = document.getElementById('box2')
        //				三角函数

        //				利用三角函数,根据当前度数计算left和top，生效
        box.style.left = Math.cos(Math.PI / 180 * iNow) * r + 150 + 'px'
        box.style.top = Math.sin(Math.PI / 180 * iNow) * r + 150 + 'px'
      }, 150)
    },
    getYuanzhou3() {
      //		步长度数
      var speed = 10
      //		半径
      var r = 200
      //		当前度数
      var iNow = 270

      //		清除计时器
      clearInterval(this.t3)
      //		开启计时器
      this.t3 = setInterval(() => {
        //			判断是否到目标
        //				计算当前度数
        iNow += speed
        var box = document.getElementById('box3')
        //				三角函数

        //				利用三角函数,根据当前度数计算left和top，生效
        box.style.left = Math.cos(Math.PI / 180 * iNow) * r + 150 + 'px'
        box.style.top = Math.sin(Math.PI / 180 * iNow) * r + 150 + 'px'
      }, 150)
    }
  }
}
</script>

<style lang="scss">
.homeddd {
  #box5 {
    width: 400px;
    height: 400px;
    position: relative;
    left: 800px;
    top: 200px;
    border-radius: 50%;
    border: 3px solid #aaaaaa;
    .b {
      width: 100px;
      height: 100px;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 50%;
    }
    #box {
      background: red;
    }
    #box1 {
      background: forestgreen;
    }
    #box2 {
      background: #00ff00;
    }
    #box3 {
      background: gold;
    }
  }
  .dtbox {
    width: 200px;
    height: 60px;
    margin-left: 200px;
    border: 1px solid #eeeeee;
    .dsj {
      line-height: 60px;
      text-align: center;
    }
  }
  .fade-enter,.fade-leave-to {
    opacity: 0;
  }
  .fade-enter-active ,.fade-leave-active {
    transition: opacity 3s;
  }
}
</style>
